<template>
  <el-dialog title="归还确认" :visible="visible" :close-on-click-modal="false" width="800px" @close="closeVisble">
    <el-form ref="ruleForm" label-position="top" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm">

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="基本信息">
            <div class="base-cla">
              <el-row><span>申请人</span>{{ name || '' }}</el-row>
              <el-row><span>所在部门</span>{{ dep || '' }}</el-row>
              <el-row>
                <span>领用设备</span>{{ device.device_name || '' }}
                <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                >
                  <el-row>
                    <el-row class="margin-b-10">
                      <el-col :span="12">设备类型</el-col> <el-col :span="12">{{ device.device_category }}</el-col>
                    </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">资产编号</el-col> <el-col :span="12">{{ device.device_code }}</el-col> </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">设备名称</el-col> <el-col :span="12">{{ device.device_name }}</el-col> </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">CPU</el-col> <el-col :span="12">{{ device.cpu }}</el-col> </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">运存</el-col> <el-col :span="12">{{ device.mem }}</el-col> </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">GPU</el-col> <el-col :span="12">{{ device.gpu }}</el-col> </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">储存容量</el-col> <el-col :span="12">{{ device.volume }}</el-col> </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">状态</el-col> <el-col :span="12"> <ProStatus :status="device.device_status" /></el-col> </el-row>
                    <el-row class="margin-b-10"> <el-col :span="12">序列号</el-col> <el-col :span="12">{{ device.mac_address_1 }}</el-col> </el-row>
                  </el-row>
                  <i slot="reference" class="el-icon-warning" style="color: #999" />
                </el-popover>
              </el-row>
              <!-- <el-row><span>已领用设备</span>{{ collect_devices || '' }}</el-row> -->
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="设备状态" prop="">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">维修</el-radio>
              <el-radio :label="2">报废</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeVisble">取 消</el-button>
      <el-button type="primary" @click="checkBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Moment from 'moment'
import { deviceApplyInfo, devicePutReturn } from '@/api/property'
import { mapGetters } from 'vuex'
import ProStatus from '@/components/Property/ProStatus'
import { rulesCon } from '@/views/archives/config'
export default {
  name: 'EditFrom',
  components: {
    ProStatus
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    },
    dep: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        status: 0
      },
      rules: rulesCon,
      device: {}
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  watch: {
    visible: {
      handler(value) {
        if (value && this.id) {
          this.init()
        }
      }
    }
  },
  mounted() {},
  methods: {
    Moment,
    async init() {
      if (!this.id) {
        return false
      }
      const res3 = await deviceApplyInfo({ employee_id: this.userId, device_id: this.id })
      if (res3.ret === 0) {
        this.device = res3.data.device
      }
    },
    async checkBtn() {
      const res = await devicePutReturn(this.id, this.ruleForm.status)
      if (res.ret === 0) {
        this.$message.success('归还成功')
        this.$emit('success')
      }
    },
    closeVisble() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.base-cla {
  padding: 5px;
  padding-left: 15px;
  color: #606266;
  font-size: 14px;
  background-color:rgb(244, 248, 249);
  span {
    display: inline-block;
    width: 100px;
  }
}
</style>
